<template>
  <a-card :bordered="false" class="tab_list_card" style="margin-bottom: 16px">
    <a-tabs
      @change="
        (val) => {
          $router.push({ name: val })
        }
      "
      v-if="currentRoute.children && currentRoute.children.length"
      :activeKey="currentRouteName"
    >
      <a-tab-pane :key="item.name" :tab="item.meta.title" v-for="item in currentRoute.children.filter(element=>!element.hidden)"> </a-tab-pane>
    </a-tabs>
    <slot></slot>
  </a-card>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
      currentRoute:{}
    }
  },
  computed: {
    currentRouteName() {
      return this.$route.name
    },
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters,
      multiTab: (state) => state.app.multiTab
    }),
    currentRouteObj () {
      return this.$route
    }
  },
  watch: {
    currentRouteObj: {
      handler(val) {
        const routes = this.mainMenu.find((item) => item.path === '/')
        const menus = (routes && routes.children) || []
        menus.forEach((element) => {
          if (element.children) {
            element.children.forEach((item) => {
              if (item.name == val.name) {
                this.currentMenu = element
                this.currentRoute = item
                return false
              }
              if (item.children) {
                item.children.forEach((el) => {
                  if (el.name == val.name) {
                    this.currentMenu = element
                    this.currentRoute = item
                  }
                })
              }
            })
          }
        })
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {
    console.log(this.currentRoute,"currentRoute");
  },
  methods: {},
}
</script>

<style scoped>
.my_main {
  padding: 20px;
}
</style>